<template>
  <gui-page ref="pageRef" class="gui-bg-white" :custom-header="true" :full-page="true" :is-loading="pageLoading">
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-bg-white" style="height: 44px">
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <gui-header-leading :home="false" />
        <text class="gui-h5 gui-flex1 gui-text-center gui-ellipsis gui-primary-text">位次查询</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <view style="width: 120rpx" />
      </view>
    </template>
    <template #gFixedTop>
      <view class="gui-bg-white">
        <view class="gui-bg-white gui-dark-bg-level-3 gui-flex gui-row gui-nowrap gui-align-items-center gui-padding" style="height: 88rpx">
          <view class="graceSelectMenuItem">
            <gui-select-menu
              ref="selectRef1"
              class-name="gui-bg-gray gui-border-radius-full select-title"
              :is-h5header="false"
              :items="selectMenu1"
              @select="select1"
            />
          </view>
          <view class="graceSelectMenuItem">
            <gui-select-menu
              ref="selectRef2"
              class-name="gui-bg-gray gui-border-radius-full select-title"
              :is-h5header="false"
              :items="selectMenu2"
              :select-index="selectIndex2"
              @select="select2"
            />
          </view>
          <view class="graceSelectMenuItem">
            <gui-select-menu
              ref="selectRef3"
              class-name="gui-bg-gray gui-border-radius-full select-title"
              :is-h5header="false"
              :items="selectMenu3"
              @select="select3"
            />
          </view>
        </view>
        <view class="gui-dark-bg-level-1 gui-flex gui-row">
          <gui-search
            class="gui-flex1"
            clear-btn
            :custom-class="['gui-bg-gray', 'gui-margin-x']"
            :kwd="kwd"
            placeholder="请输入分数"
            type="number"
            @confirm="submit"
            @inputting="inputting"
          >
            <template #leftIcon>
              <text>&#xe69e;</text>
            </template>
          </gui-search>
          <view class="gui-padding-small gui-color-gray" style="margin-right: 15rpx">
            <button class="gui-button-mini gui-primary-border-color gui-border-radius-full" :plain="true" type="default" @tap.stop="submit">
              <text class="gui-icons gui-primary-color gui-button-text-mini">&#xe604; 查询</text>
            </button>
          </view>
        </view>
      </view>
    </template>
    <template #gBody>
      <view class="gui-flex1 gui-flex gui-column gui-padding" style="margin-top: 150rpx">
        <!-- 主体区域 -->
        <view class="gui-text-small">
          <view class="gui-color-gray gui-flex">
            <text class="gui-flex1">同分人数</text>
            <text class="gui-flex1">位次</text>
          </view>
          <view class="gui-flex gui-margin-top-small">
            <text class="gui-flex1">489人</text>
            <text class="gui-flex1">38334</text>
          </view>
        </view>
        <view class="charts-box">
          <qiun-data-charts :canvas2d="true" :chart-data="chartData" :opts="opts" type="mix" />
        </view>
        <!--    等位分对照表      -->
        <view class="gui-card-view gui-bg-white gui-dark-bg-level-3 gui-margin-top gui-border-b gui-border-radius gui-border">
          <view class="gui-card-body gui-flex gui-rows gui-nowrap">
            <view class="gui-flex1">
              <view class="gui-flex gui-rows gui-nowrap gui-align-items-center">
                <text class="gui-card-name gui-text-small gui-bold">等位分对照表</text>
                <text class="gui-icons gui-color-gray" @tap.stop="openHelpModel">&#xe628;</text>
              </view>
              <view class="gui-bg-white gui-dark-bg-level-3 gui-margin-top">
                <view class="gui-flex gui-rows gui-nowrap gui-border-l gui-border-t gui-bg-orange3 gui-color-white gui-dark-bg-level-2">
                  <text class="gui-td gui-border-r gui-border-b gui-text-small gui-bold gui-text-center">年份</text>
                  <text class="gui-td gui-border-r gui-border-b gui-text-small gui-bold gui-text-center">位次区间</text>
                  <text class="gui-td gui-border-r gui-border-b gui-text-small gui-bold gui-text-center">等位分</text>
                </view>
                <view
                  v-for="(item, index) in students"
                  :key="index"
                  class="gui-flex gui-rows gui-nowrap gui-border-l"
                  :class="{ 'gui-bg-orange5': index % 2 === 1 }"
                >
                  <text class="gui-td gui-border-r gui-border-b gui-text-small gui-text-center">{{ item[0] }}</text>
                  <text class="gui-td gui-border-r gui-border-b gui-text-small gui-text-center">{{ item[1] }}</text>
                  <text class="gui-td gui-border-r gui-border-b gui-text-small gui-text-center">{{ item[2] }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!--  弹窗    -->
      <gui-popup ref="helpModelRef" :z-index="9999">
        <view class="gui-relative gui-box-shadow gui-img-in gui-bg-white gui-padding gui-border-radius">
          <view style="margin-top: 60rpx">
            <text class="gui-text-small">01、02、03代 表的意思分别是 国家重点学科、 省重点学科、不 是重点学科。</text>
          </view>
          <!-- 关闭按钮 -->
          <text class="gui-block modal-close gui-icons gui-absolute-rt" @tap.stop="closeHelpModel">&#xe78a;</text>
        </view>
      </gui-popup>
    </template>
  </gui-page>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const pageRef = ref<any>(null)
const pageLoading = ref<boolean>(false)
// 搜索
const kwd = ref<string>('')
const students = ref<Array<any>>([
  ['2023年', '31144名～31552名', '520分', 7],
  ['2022年', '31024名～31442名', '520分', 7],
  ['2021年', '31214名～31842名', '520分', 7],
])

// 图表
const chartData = ref<any>({})
const opts = ref<any>({
  color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
  padding: [15, 15, 0, 15],
  enableScroll: false,
  legend: {},
  yAxis: {
    disableGrid: true,
    splitNumber: 5,
    gridType: 'dash',
    dashLength: 4,
    gridColor: '#CCCCCC',
    padding: 10,
    showTitle: false,
    data: [
      {
        position: 'left',
        title: '折线',
      },
      {
        position: 'right',
        min: 0,
        max: 200,
        title: '柱状图',
        textAlign: 'left',
      },
    ],
  },
  extra: {
    mix: {
      column: {
        width: 20,
      },
    },
  },
})

const modalRef = ref<any>(null)
const helpModelRef = ref<any>(null)
const selectRef1 = ref<any>(null)
const selectRef2 = ref<any>(null)
const selectRef3 = ref<any>(null)

const selectMenu1 = ref<Array<any>>(['位置', '精选优品', '价格较低', '只买贵的', '其他方式'])
const selectMenu2 = ref<Array<any>>(['专业', '大专', '本科', '硕士', '博士'])
const selectMenu3 = ref<Array<any>>(['类型', 'php', 'java', 'c#', 'nodejs'])

const selectIndex2 = ref<number>(0)

const reset = () => {
  selectRef1.value.setCurrentIndex(0)
  selectRef2.value.setCurrentIndex(0)
  selectRef3.value.setCurrentIndex(0)
}
const select1 = (index: number, val: any) => {
  console.log(`选择了 ${val}`)
}
const select2 = (index: number, val: any) => {
  console.log(`选择了 ${val}`)
}
const select3 = (index: number, val: any) => {
  console.log(`选择了 ${val}`)
}
// 监听输入
const inputting = (e: any) => {
  kwd.value = e
}
// 提交
const submit = () => {
  console.log('搜索：')
}
// 弹窗
const openHelpModel = () => {
  helpModelRef.value.open()
}
const closeHelpModel = () => {
  helpModelRef.value.close()
}
const closePopup = () => {
  modalRef.value.close()
}

const getServerData = () => {
  //模拟从服务器获取数据时的延时
  setTimeout(() => {
    //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
    const res = {
      categories: ['2018', '2019', '2020', '2021', '2022', '2023'],
      series: [
        {
          name: '曲面',
          type: 'area',
          style: 'curve',
          data: [70, 50, 85, 130, 64, 88],
        },
        {
          name: '柱1',
          index: 1,
          type: 'column',
          data: [70, 50, 85, 130, 64, 88],
        },
        {
          name: '曲线',
          type: 'line',
          style: 'curve',
          color: '#1890ff',
          disableLegend: true,
          data: [70, 50, 85, 130, 64, 88],
        },
      ],
    }
    chartData.value = JSON.parse(JSON.stringify(res))
  }, 500)
}

onLoad((option) => {
  // console.log(JSON.parse(option.data))
  getServerData()
})
</script>
<style scoped>
/deep/ .graceSelectMenuItem {
  width: 160rpx;
  flex: 1;
}
/deep/ .gui-select-menu-title {
  height: 66rpx !important;
}
/deep/ .gui-select-menus {
  margin-top: 75rpx !important;
  border-top: 1px solid #f2f2f2;
}

/deep/ .select-title {
  width: 200rpx !important;
}
/* 卡片视图 */
.gui-card-view {
  padding: 25rpx;
  margin-top: 30rpx;
}
.gui-card-body {
  padding-bottom: 30rpx;
}
.gui-card-img {
  width: 100rpx;
  height: 100rpx;
  border-radius: 80rpx;
}
.gui-card-desc {
  width: 400rpx;
  margin-left: 25rpx;
  flex: 1;
}
.gui-card-name {
  font-size: 28rpx;
  line-height: 40rpx;
  margin-right: 20rpx;
}
.gui-card-text {
  line-height: 40rpx;
  font-size: 24rpx;
}
.gui-card-footer {
  margin-top: 25rpx;
}
.gui-card-footer-item {
  width: 100rpx;
  text-align: center;
  flex: 1;
  line-height: 38rpx;
  font-size: 26rpx;
}
/* #ifndef APP-NVUE */
.gui-card-footer-item {
  display: block;
}
.gui-box-shadow {
  box-shadow: unset;
}
/* #endif */
.modal-close {
  width: 100rpx;
  height: 100rpx;
  line-height: 100rpx;
  opacity: 0.88;
  text-align: center;
  font-size: 58rpx;
}
.gui-td {
  flex: 1;
  overflow: hidden;
  padding: 10rpx;
}
.gui-primary-text {
  line-height: 60rpx !important;
  font-size: 24rpx;
}
.charts-box {
  width: 100%;
  height: 300rpx;
}
</style>
